{% extends site.theme|stringformat:"s/include/simplebase.html" %}{% block script %}{% load filters %}
	<script src="/static/dialog/lhgdialog.min.js?self=true" type="text/javascript"></script>
	<script src="/static/{{site.theme}}/js/utilitydlg.js" type="text/javascript"></script>
{% endblock %}{% block mainer %}
<div class="imglistoper">
	<div style="float:left; parding-right:10px;">目录：<select id="dirlist" name="dirlist" onChange="dirchange();">{% for e in dirlist %}{% if '.' not in e %}<option value={{e}} {% if e == path.path %}selected{% endif %}>{{e}}</option>{% endif %}{% endfor %}</select></div>
	<div style="float:right; margin-top:-4px;">{% if site.power.user.power >= 100 %}<input type="button" value="目录管理" onClick="openDirEdit();"><input type="button" value="上传图片" onClick="openUpload();"><input id="btnEdit" type="button" value="编辑图片">{% endif %}</div>
	<div style="padding:5px 5px;">提示：单击图片选中！双击图片放大进行管理！<input name="imgSelected"  id="imgSelected" type="Hidden" value=""></div>
</div>
<div class="imgpager">{% include site.theme|stringformat:"s/include/pager.html" with pager=pager %}</div>
<div id="imgslist" class="imglist"><center><table><tr>{% for e in imglist %}
	<td><div class="imgoperate"><a href="javascript:delImg('{{forloop.counter}}');">删除</a></div><img id="i{{forloop.counter}}" src="/media/{{path.dir}}/{{path.path}}/{{e}}" title="/media/{{path.dir}}/{{path.path}}/{{e}}" /></td>{% if forloop.counter|mod:4 == 0 %}</tr><tr>{% endif %}
{% endfor %}</tr></table></center></div>
<div id="editdir" style="display:none;">
	<table class="detailTable">
		<thead><tr><th width="100px">目录</th><th width="60px">操作</th></tr></thead>
		{% for e in dirlist %}<tr id="e-{{forloop.counter}}">
		    <th>{{e}}</th>
		    <td><a href="javascript:delImage('rmdir' ,'{{e}}',{{forloop.counter}});">删除</a></td>
	  	</tr>{%endfor%}
	  	<tr><td><input style="width:80px;" type="text" id="dir" name="dir"></td><td><input type="button" value="创建" onClick="mkdir();"></td></tr>
  </table>
</div>
<div id="imgPreDiv" style="display:none;"><div><center>
		<div><img style="max-width:500px; _width: expression(this.width > 500 ? '500' : 'auto');" id="preFrontcover" src="" /></div>
		<div style="padding-top:5px;" ><a href="javascript:delImg();">删除</a></div></center></div>
</div>

<script type="text/javascript">
<!-- 
var editDirDlag;
bindImgs();
function bindImgs(){
	$('#imgslist img').bind({click: function(){
			$('#imgslist img').removeAttr('class');
			$(this).attr('class', 'selectedimg');
			$('#imgSelected').val($(this).attr('title'));
		},
		dblclick:function(){
			$('#imgslist img').removeAttr('class');
			$(this).attr('class', 'selectedimg');
			$('#imgSelected').val($(this).attr('title'));
			openPreImgDlg($(this).attr('title'));
		}
	});
	
	$('#btnEdit').toggle(
			function(){$('.imgoperate').show(); $('#btnEdit').val('取消编辑');},
			function(){$('.imgoperate').hide(); $('#btnEdit').val('编辑图片');}
	);
}
function openDirEdit(){
	editDirDlag = $.dialog({
		id:'editDir', title:'目录管理',
		content: $('#editdir').html(),
		max: false, min: false, lock: true,
		close: function(){ this.reload(); }
	})
}
function openUpload(){
	editDirDlag = $.dialog({
		id:'UploadImg', title:'图片上传',
		content: 'url:/uploadImage/{{path.dir}}/'+$('#dirlist').val()+'.html',
		max: false, min: false, lock: true,
		ok: true, cancel: true,
		close: function(){ this.reload(); }
	})
}
function dirchange(){
	window.location.href="/imgsImage/{{path.dir}}/"+$('#dirlist').val()+".html"; 
}
//删除目录
function delImage(action, name, id){
	$("#e-"+id).attr('bgcolor','red');
	$.dialog.confirm('确定要删除此项么?',
			function(){
				var url="/"+action+"Image/{{path.dir}}.do";
				$.post(url, {_retType:"json", name:name}, function(data){
							if(data.flag){$("#e-"+id).attr('bgcolor','red').fadeOut("slow",function(){$(this).remove();});}
							else $.dialog.alert(data.msg, function(){$("#e-"+id).removeAttr('bgcolor');});
				},'json');
			},
			function(){$("#e-"+id).removeAttr('bgcolor');}
	);
}
//删除图片
function delImg(id){
	$('#imgslist img').removeAttr('class');
	$('#i'+id).attr('class', 'selectedimg');
	var src_array = $('#i'+id).attr('src').split("/");
	var name = src_array[src_array.length-1]
	$.dialog.confirm('确定要删除此项么?',
			function(){
				var url="/deleteImage/{{path.dir}}/{{path.path}}.do";
				$.post(url, {_retType:"json", name:name}, function(data){
					$.dialog.alert(data.msg);
					if(data.flag){$('#i'+id).parent().remove();}
					else {$('#imgslist img').removeAttr('class');};
				},'json');
			},
			function(){$('#imgslist img').removeAttr('class');}
	);
}

function mkdir(){
	path = $("#dir").val();
	if(path==""){$.dialog.alert("目录名不能为空！");return false;}
	var url="/mkdirImage/{{path.dir}}.do";
	$.post(url, {_retType:"json", dir:path}, function(data){
		$.dialog.alert(data.msg);
		if(data.flag){editDirDlag.close();editDirDlag.reload();}
	},'json');
}
//-->
</script>
{% endblock %}